<template>
  <div>
    <el-table :data="tableData"
              style="width: 100%">
      <el-table-column prop="date"
                       label="日期">
      </el-table-column>
      <el-table-column prop="name"
                       label="车名">
      </el-table-column>
      <el-table-column prop="feat"
                       label="特点">
        <template slot-scope="scope">
          <el-tag v-for="(item, index) in scope.row.feat"
                  :key='index'
                  class="feat-tag-marggin"
                  type="success">{{item}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="address"
                       label="地址">
      </el-table-column>
      <el-table-column fixed="right"
                       label="操作(统一增加’性能好‘特点)">
        <template slot-scope="scope">
          <!-- <el-button type="text" size="small">查看</el-button> -->
          <el-button @click="handleClick(scope.row)"
                     type="primary"
                     size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang='ts'>
import { Component, Vue } from 'vue-property-decorator'
@Component({
  name: 'table-list'
})
export default class extends Vue {
  private tableData: any[] = [
    {
      id: 1,
      date: '2016-05-02',
      name: '路虎',
      feat: ['高端', '大气', '上档次'],
      address: '上海市普陀区金沙江路 1518 弄'
    },
    {
      id: 2,
      date: '2016-05-04',
      name: '马萨拉蒂',
      feat: ['大气', '上档次'],
      address: '上海市普陀区金沙江路 1517 弄'
    },
    {
      id: 3,
      date: '2016-05-01',
      name: '宝马',
      feat: ['高端'],
      address: '上海市普陀区金沙江路 1519 弄'
    },
    {
      id: 4,
      date: '2016-05-03',
      name: '奥迪A5',
      feat: ['高端', '大气', '漂亮'],
      address: '上海市普陀区金沙江路 1516 弄'
    }
  ]

  handleClick (row: any) {
    this.tableData.forEach((item) => {
      if (item.id === row.id) {
        item.feat.push('性能好')
      }
      // this.$forceUpdate();//在这里，强制刷新
    })
  }
}
</script>

<style lang="scss" scoped>
.feat-tag-marggin{
  margin: 0 5px;
}
</style>
